<template>
  <div class="property-page">
    <div class="header">
      <h2>财产证明文件上传</h2>
    </div>

    <!-- 文件上传容器 -->
    <el-form :model="propertyProof" label-width="120px" class="property-form" ref="propertyForm">
      <el-form-item label="上传财产证明文件" prop="propertyProof">
        <el-upload
            class="property-upload"
            action="#"
            :file-list="propertyProof.fileList"
            :on-change="handleFileChange"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            multiple
            accept="image/png, image/jpeg, image/jpg, application/pdf"
            :limit="5"
            :on-exceed="handleExceed"
            drag
            :auto-upload="false"
        >
          <i class="el-icon-plus"></i>
          <div class="upload-text">点击或拖拽文件到这里上传</div>
          <div class="tip">支持JPG、PNG、PDF格式，最大文件大小4MB，最多上传5个文件</div>
        </el-upload>
      </el-form-item>

      <!-- 已上传文件预览 -->
      <el-form-item label="已上传文件">
        <div class="file-preview">
          <el-row gutter={20}>
            <el-col :span="6" v-for="(file, index) in propertyProof.fileList" :key="index">
              <div class="file-item">
                <img
                    v-if="file.type.includes('image')"
                    :src="file.url || URL.createObjectURL(file.raw)"
                    alt="文件预览"
                    class="file-img"
                    @click="handlePreview(file)"
                />
                <div v-if="file.type.includes('pdf')" class="file-pdf">PDF 文件</div>
                <div class="file-name">{{ file.name }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 图片查看弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <img :src="previewImage" alt="预览" class="preview-img" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 财产证明数据模型
const propertyProof = ref({
  fileList: [] // 存储上传的文件列表
})

// 控制图片预览弹窗的显示与隐藏
const dialogVisible = ref(false)
const previewImage = ref('')

// 选择文件前的验证
const beforeUpload = (file) => {
  // 限制文件大小为 4MB
  const isLt4MB = file.size / 1024 / 1024 < 4;
  if (!isLt4MB) {
    this.$message.error('上传文件大小不能超过 4MB!');
  }

  // 限制文件格式
  const isValidFormat = ['image/jpeg', 'image/png', 'application/pdf'].includes(file.type);
  if (!isValidFormat) {
    this.$message.error('只能上传 JPG、PNG 或 PDF 格式的文件!');
  }

  return isLt4MB && isValidFormat;
}

// 处理文件更改事件
const handleFileChange = (file, fileList) => {
  // 更新文件列表
  propertyProof.value.fileList = fileList;
}

// 处理文件删除事件
const handleRemove = (file, fileList) => {
  // 文件删除后更新列表
  propertyProof.value.fileList = fileList;
}

// 超过文件限制时的处理
const handleExceed = (files, fileList) => {
  this.$message.warning('你上传的文件数量超出了限制！');
}

// 表单提交
const submitForm = () => {
  const form = $refs.propertyForm;

  form.validate((valid) => {
    if (valid) {
      console.log('提交的财产证明文件：', propertyProof.value.fileList);
      // 在此处理提交数据的逻辑，如上传到服务器
    } else {
      console.log('表单验证失败！');
    }
  });
}

// 重置表单
const resetForm = () => {
  propertyProof.value.fileList = [];
}

// 处理点击图片查看
const handlePreview = (file) => {
  previewImage.value = file.url || URL.createObjectURL(file.raw)
  dialogVisible.value = true
}
</script>

<style scoped>
.property-page {
  padding: 20px;
  background-color: #fff;
}

.header {
  margin-bottom: 20px;
}

.property-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  font-weight: bold;
  margin-right: 10px;
}

.property-upload {
  width: 100%;
  border: 2px dashed #dcdfe6;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 10px;
}

.property-upload:hover {
  background-color: #f9f9f9;
}

.upload-text {
  font-size: 18px;
  color: #999;
  margin-top: 10px;
}

.tip {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

.el-icon-plus {
  font-size: 40px;
  color: #409EFF;
}

.file-preview {
  margin-top: 20px;
}

.file-item {
  text-align: center;
}

.file-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 120px;
  max-height: 120px;
  margin-bottom: 10px;
  cursor: pointer;
}

.file-pdf {
  font-size: 14px;
  color: #409EFF;
  margin-bottom: 10px;
}

.file-name {
  font-size: 14px;
  color: #333;
}

.preview-img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
}
</style>
